<!-- <style>
    .tudou {
        position: relative;
        width: 444px;
        height: 320px;
        background-color: pink;
        margin: 30px auto;
    }

    .tudou img {
        width: 100%;
        height: 100%;
    }

    .tudou::before {
        content: '';
        /* 隐藏遮罩层 */
        display: none;
        /* 子绝父相 */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
    }

    /* 当我们鼠标经过 土豆这个盒子，就让里面遮罩层显示出来 */
    .tudou:hover::before {
        display: block;
    }
</style>
</head>

<body>
<div class="tudou">
    <img src="./src/assets/images/404_r.jpg" alt="">

</div>
</body> -->
<style>
    .tudou {
        position: relative;
        height: 1320px;
        background-color: pink;
        margin: 30px auto;
    }

    .tudou img {
        width: 100%;
        height: 100%;
    }

    .mask {
        /* 隐藏遮罩层 */
        display: none;
        /* 子绝父相 */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
    }

    /* 当我们鼠标经过 土豆这个盒子，就让里面遮罩层显示出来 */
    .tudou:hover .mask {
        display: block;
    }
</style>
</head>

<body>
<div class="tudou">
    <div class="mask"></div>
    <img src="./src/assets/images/404_r.jpg" alt="">

</div>